<template>
  <!--弹窗，修改菜单-->
  <div v-dialog-drag="dialogInfo.width" >
    <el-dialog
      title="修改菜单"
      v-model="dialogInfo.isShow"
      :modal="true"
      :width="dialogInfo.width"
      :close-on-click-modal="true"
      :destroy-on-close="true"
    >
      <el-scrollbar style="height:300px;margin: 2px;">
        <nf-form
          :model="info.menu"
          v-bind="menuProps"
        >
        </nf-form>
      </el-scrollbar>
      <el-button type="" @click="save">保存</el-button> 
    </el-dialog>
  </div>
</template>

<script>
  import { reactive } from 'vue'
  import { ElButton, ElDialog, ElScrollbar } from 'element-plus'
  import { nfForm } from '@naturefw/ui-elp'

  import menu_mod from './json/menu-add.json'

</script>

<script setup>

  const props = defineProps({
    current: Object,
    meta: Object,
    dialogInfo: Object,
    menuIndex: Number // 序号
  })
  const info = props.dialogInfo

  const menuProps = reactive(menu_mod)

  // 保存到 indexedDB 
  const save = () => {
    info.savaMenuList()
    info.isShow = false
  }

</script>
